<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>jd.com</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div class="jd_layout">
    <!-- 头部搜索栏 -->
    <div class="jd_header">
        <div class="jd_header_box">
            <!-- 向左决定定位 -->
            <a class="jd_header_box_logo" href="#">
                <img class="icon_logo" src="../img/jd_logo.png" alt="">
            </a>
            <!-- 宽度使用百分比，伸缩适配   -->
            <form action="">
                <span class="icon_search"></span>
                <input type="search" placeholder="输入搜索商品">
            </form>
            <!-- 向右绝对定位 -->
            <a href="#" class="jd_login">登录</a>
        </div>
    </div>

    <!-- banner 轮播图-->
    <div class="jd_banner">
        <ul>
            <li><a href=""><img src="../img/banner06.jpg" alt=""></a></li>
            <li><a href=""><img src="../img/banner01.jpg" alt=""></a></li>
            <li><a href=""><img src="../img/banner02.jpg" alt=""></a></li>
            <li><a href=""><img src="../img/banner03.jpg" alt=""></a></li>
            <li><a href=""><img src="../img/banner04.jpg" alt=""></a></li>
            <li><a href=""><img src="../img/banner05.jpg" alt=""></a></li>
            <li><a href=""><img src="../img/banner06.jpg" alt=""></a></li>
            <li><a href=""><img src="../img/banner01.jpg" alt=""></a></li>
        </ul>
        <ul>
            <li class="banner_now"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <!-- 导航栏 -->
    <nav class="nav">
        <ul class="clear">
            <li>
                <a href="">
                    <div><img src="../img/nav_tmail.png" alt="">
                        <p>天猫</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div><img src="../img/nav_juhusuan.png" alt="">
                        <p>聚划算</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div><img src="../img/nav_tmail_international.png" alt="">
                        <p>天猫国际</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div><img src="../img/nav_out_order.png" alt="">
                        <p>外卖</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div><img src="../img/nav_tmail.png" alt="">
                        <p>天猫</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div><img src="../img/nav_juhusuan.png" alt="">
                        <p>聚划算</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div><img src="../img/nav_tmail_international.png" alt="">
                        <p>天猫国际</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div><img src="../img/nav_out_order.png" alt="">
                        <p>外卖</p>
                    </div>
                </a>
            </li>

        </ul>
    </nav>

    <!-- 商品区 -->
    <div class="hot_goods">
        <section class="hot_goods_box">
            <div class="hot_goods_main_content">
                <div class="hot_goods_title no_border">
                    <h3>全程秒抢</h3>
                    <div class="goods_leave_time">
                        <span>抢购剩余时间</span>
                        <span class="goods_leave_time_num">19</span>
                        <span>:</span>
                        <span class="goods_leave_time_num">11</span>
                        <span>:</span>
                        <span class="goods_leave_time_num">11</span>
                    </div>
                    <p><a href="">更多&gt;&gt;</a></p>
                </div>
                <div class="hot_goods_content">
                    <div class="hot_goods_content_box">
                        <a href="">
                            <img src="../img/sk01.png" alt="">
                            <p>&yen;189</p>
                            <p>&yen;265</p>
                        </a>
                    </div>
                    <div class="hot_goods_content_box">
                        <a href="">
                            <img src="../img/sk02.png" alt="">
                            <p>&yen;99</p>
                            <p>&yen;145</p>
                        </a>
                    </div>
                    <div class="hot_goods_content_box">
                        <a href="">
                            <img src="../img/sk03.png" alt="">
                            <p>&yen;3399</p>
                            <p>&yen;2790</p>
                        </a>
                    </div>
                    <div class="hot_goods_content_box">
                        <a href="">
                            <img src="../img/sk04.png" alt="">
                            <p>&yen;226</p>
                            <p>&yen;369</p>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 逛商场 -->
        <section class="hot_goods_box">
            <div class="hot_goods_box_header">
                <img src="../img/hot_goods_header.jpg" alt="">
            </div>
            <div class="hot_goods_main_content">
                <!-- 标题区 -->
                <div class="hot_goods_title">
                    <h3>京东超市</h3>
                    <p><a href="">更多&gt;&gt;</a></p>
                </div>

                <!-- 商品内容区 -->
                <div class="hot_goods_content">
                    <!-- 占屏幕 50% 宽 -->
                    <div class="hot_goods_w50">
                        <!-- 绝对定位左上角 -->
                        <div class="hot_goods_w50_left">
                            <p>进口馆</p>
                            <p>满99减50</p>
                        </div>
                        <!-- 绝对定位右下角 -->
                        <div class="hot_goods_w50_right">
                            <img src="../img/hot_goods_w50_01.png" alt="">
                        </div>
                    </div>
                    <div class="hot_goods_w50">
                        <!-- 绝对定位左上角 -->
                        <div class="hot_goods_w50_left">
                            <p>数码馆</p>
                            <p>数码大本营</p>
                        </div>
                        <!-- 绝对定位右下角 -->
                        <div class="hot_goods_w50_right">
                            <img src="../img/hot_goods_w50_03.png" alt="">
                        </div>
                    </div>
                    <div class="hot_goods_w50">
                        <!-- 绝对定位左上角 -->
                        <div class="hot_goods_w50_left">
                            <p>美妆馆</p>
                            <p>领免费试用</p>
                        </div>
                        <!-- 绝对定位右下角 -->
                        <div class="hot_goods_w50_right">
                            <img src="../img/hot_goods_w50_02.png" alt="">
                        </div>
                    </div>
                    <div class="hot_goods_w50">
                        <!-- 绝对定位左上角 -->
                        <div class="hot_goods_w50_left">
                            <p>手机馆</p>
                            <p>手机大减价</p>
                        </div>
                        <!-- 绝对定位右下角 -->
                        <div class="hot_goods_w50_right">
                            <img src="../img/hot_goods_w50_04.png" alt="">
                        </div>
                    </div>

                    <!-- 占屏幕 25% 宽 -->
                    <div class="hot_goods_w25">
                        <div class="hot_goods_w25_top">
                            <p>手机馆</p>
                            <p>手机大减价</p>
                        </div>
                        <div class="hot_goods_w25_bottom">
                            <img src="../img/hot_goods_w25_01.png" alt="">
                        </div>
                    </div>
                    <div class="hot_goods_w25">
                        <div class="hot_goods_w25_top">
                            <p>手机馆</p>
                            <p>手机大减价</p>
                        </div>
                        <div class="hot_goods_w25_bottom">
                            <img src="../img/hot_goods_w25_02.png" alt="">
                        </div>
                    </div>
                    <div class="hot_goods_w25">
                        <div class="hot_goods_w25_top">
                            <p>手机馆</p>
                            <p>手机大减价</p>
                        </div>
                        <div class="hot_goods_w25_bottom">
                            <img src="../img/hot_goods_w25_03.png" alt="">
                        </div>
                    </div>
                    <div class="hot_goods_w25">
                        <div class="hot_goods_w25_top">
                            <p>手机馆</p>
                            <p>手机大减价</p>
                        </div>
                        <div class="hot_goods_w25_bottom">
                            <img src="../img/hot_goods_w25_04.png" alt="">
                        </div>
                    </div>

                    <div class="hot_goods_w25">
                        <div class="hot_goods_w25_top">
                            <p>手机馆</p>
                            <p>手机大减价</p>
                        </div>
                        <div class="hot_goods_w25_bottom">
                            <img src="../img/hot_goods_w25_04.png" alt="">
                        </div>
                    </div>
                    <div class="hot_goods_w25">
                        <div class="hot_goods_w25_top">
                            <p>手机馆</p>
                            <p>手机大减价</p>
                        </div>
                        <div class="hot_goods_w25_bottom">
                            <img src="../img/hot_goods_w25_03.png" alt="">
                        </div>
                    </div>
                    <div class="hot_goods_w25">
                        <div class="hot_goods_w25_top">
                            <p>手机馆</p>
                            <p>手机大减价</p>
                        </div>
                        <div class="hot_goods_w25_bottom">
                            <img src="../img/hot_goods_w25_02.png" alt="">
                        </div>
                    </div>
                    <div class="hot_goods_w25">
                        <div class="hot_goods_w25_top">
                            <p>手机馆</p>
                            <p>手机大减价</p>
                        </div>
                        <div class="hot_goods_w25_bottom">
                            <img src="../img/hot_goods_w25_01.png" alt="">
                        </div>
                    </div>

                </div>
            </div>
        </section>

    </div>

</div>
</body>
</html>